<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>年会抽奖</title>
    <style>
        * { border: 0px; margin: 0px; padding: 0px; font-family: "微软雅黑"}
        body {
            background: url("images/bg.png");
            background-repeat:no-repeat;
            background-size:cover;
            overflow: hidden;
        }
        img {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
            top:0px;
            left: 0px;
        }
        p {
            height: 10%;
        }
        .box {
            position: fixed;
            text-align: center;
        }
        h1 {
            width: 100%;
            color: white;
            margin-top: 15px;
            margin-bottom: 20px;
        }
        .number-ball {
            width: 60%;
            height: 50%;
            background: #cf230d;
            margin-left: 20%;
        }
        .number-ball p {
            width: 100%;
            height: 20%;
        }
        .number-ball span {
            background: black;
            border-radius: 15px;
            color: white;
            text-align: center;
            padding: 3% 15px 0 15px;
            margin: 0px 10px 0 10px;
        }
        .prize {
            color: #e4ff00;
            position: fixed;
            top:83%;
            width: 100%;
            height: auto;
            background: rgba(0, 0, 0, 0.42);
            text-align: center;
            padding: 5px  0px 5px 0;
        }
        .handler {
            background: #fff001;
            color: white;
            font-size: 22px;
            letter-spacing: 22px;
            padding: 10px 15px 10px 37px;
            border-radius: 5px;
            text-shadow:red 1px 0 0,red 0 1px 0,red -1px 0 0,red 0 -1px 0;
        }
    </style>
</head>
<body>
    <img src="images/middle.png">
    <div class="box" id="box">
        <h1 id="h1">中奖号码</h1>
        <div class="number-ball">
            <p></p>
            <span id="number1">0</span>
            <span id="number2">0</span>
            <span id="number3">0</span>
        </div>
        <p></p>
        <span class="handler" id="handler" onclick="asCilck();">抽奖</span>
    </div>

<p class="prize">中奖号码：<span id="results"></span></p>

<script>
    var playTag = false,
            timer;
    var results = [0];// 创建数组
    var result;
    var member = 5 + 1;
    var num1 = document.getElementById("number1");
    var num2 = document.getElementById("number2");
    var num3 = document.getElementById("number3");

    window.onload = function() {
        var designWidth = 1920;
        var designHeight = 1152;
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
        document.getElementById("box").style.left = winWidth / designWidth * 484 + 'px';
        document.getElementById("box").style.top = winHeight / designHeight * 445 + 'px';
        document.getElementById("box").style.width = winWidth / designWidth * 855 + 'px';
        document.getElementById("box").style.height = winHeight / designHeight * 473 + 'px';
        document.getElementById("h1").style.fontSize = winHeight / designHeight * 50 + 'px';
        document.getElementById("h1").style.fontSize = winHeight / designHeight * 50 + 'px';
        num1.style.fontSize = winHeight / designHeight * 131 + 'px';
        num2.style.fontSize = winHeight / designHeight * 131 + 'px';
        num3.style.fontSize = winHeight / designHeight * 131 + 'px';
        document.getElementById("handler").style.fontSize = winHeight / designHeight * 28 + 'px';

        if ( document.getElementById("results").innerHTML.trim() == "") {
            if (document.cookie.split(";")[0].length > 0) {
                var oldData = document.cookie.split(";")[0].split(",");
                for (var i = 1; i < oldData.length; i++) {
                    if (!ifContains(results, oldData[i])) {
                        results.push(oldData[i]);
                    }
                }
            }
            document.getElementById("results").innerHTML = results.toString().replace('0,', '');
        }
    }

    function createNumber() {
        result = Math.floor(Math.random() * member);
        if (ifContains(results, result)) {
            createNumber();
        } else {
            if(result < 10) {
                num1.innerHTML = "0";
                num2.innerHTML = "0";
                num3.innerHTML = result.toString();
            } else if (result < 100) {
                num1.innerHTML = "0";
                num2.innerHTML = result.toString().substr(0, 1);
                num3.innerHTML = result.toString().substr(1, 1);
            } else {
                num1.innerHTML = result.toString().substr(0, 1);
                num2.innerHTML = result.toString().substr(1, 1);
                num3.innerHTML = result.toString().substr(2, 1);
            }
        }
    }

    function asCilck() {
        if (results.length == member) {
            alert("抽奖结束");
            return;
        }

        if (playTag) {
            timer && window.clearInterval(timer);
            results.push(result);
            document.cookie = results;
            document.getElementById("results").innerHTML = results.toString().replace('0,', '');
            playTag = false;
        } else {
            timer = setInterval(createNumber, 10);
            playTag = true;
        }
    }

    function ifContains(a, obj) {
        var i = a.length;
        while (i --) {
            if (a[i] == obj) {
                return true;
            }
        }
        return false;
    }

    document.onkeydown = function(){
        if(event.keyCode == 32){
            asCilck();
        }
    }

</script>
</body>
</html>